<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="content"></div>
    <div id="other-content"></div>
    <!--<p>学生信息表</p>-->
    <ul id="list"></ul>
    <script src="https://unpkg.com/art-template@4.13.2/lib/template-web.js"></script>

    <!-- 1.输出 -->
    <script type="text/html" id="tpl-1">
      {{value}}<br />
      {{data}}<br />
      {{data.name}}<br />
      {{a + b}}<br />
      {{$data}}<br />
      {{$data.b}}<br />
      {{$data.data}}<br />
      {{text}}<br />
      {{@text}}<br />
    </script>

    <!-- 2.条件 -->
    <script type="text/html" id="tpl-2">
      {{if sex === "male"}} 男 {{else if sex === "female"}} 女 {{else}} 其他
      {{/if}}
    </script>

    <!-- 3.循环 -->
    <script type="text/html" id="tpl-3">
      {{each students}}

      <li>
        {{$value.name}} {{$value.sex}} {{$value.age}} {{$index}} {{$value}}
      </li>

      {{/each}}
    </script>

    <!-- 4.子模板 -->
    <!--<script type="text/html" id="tpl-4">
      {{include "tpl-4-header"}}
      <p>首页</p>
      {{include "tpl-4-footer"}}
    </script>

    <script type="text/html" id="tpl-4-header">
      <header>我是公共的头部</header>
    </script>

    <script type="text/html" id="tpl-4-footer">
      <footer>我是公共的尾部</footer>
    </script>-->
    <script type="text/html" id="tpl-5-index">
      <!--{{include "tpl-5-header"}}-->
      <% include("tpl-5-header",{ page:"首页" }) %>
      <p>首页</p>
      <!--{{include "tpl-5-footer"}}-->
      <% include("tpl-5-footer",{ page:"首页" }) %>
    </script>

    <script type="text/html" id="tpl-5-list">
      <!--{{include "tpl-5-header"}}-->
      <% include("tpl-5-header",{ page:"列表页" }) %>
      <p>列表页</p>
      <!--{{include "tpl-5-footer"}}-->
      <% include("tpl-5-footer",{ page:"列表页" }) %>
    </script>

    <script type="text/html" id="tpl-5-header">
      <header>我是{{page}}公共的头部</header>
    </script>

    <script type="text/html" id="tpl-5-footer">
      <footer>我是{{page}}公共的尾部</footer>
    </script>

    <script>
      //官方文档
      // http://aui.github.io/art-template/zh-cn/docs/

      const content = document.getElementById("content");

      // 1.输出
      //  content.innerHTML = template("tpl-1", {
      //    value: 666,
      //    data: {
      //      name: "云牧",
      //    },
      //    a: 1,
      //    b: 1,
      //    text: "<strong>重点说三遍</strong>",
      //  });

      //  console.log(
      //    template("tpl-1", {
      //    value: 666,
      //    data:{
      //        name:"云牧"
      //    },
      //    a:1,
      //    b:1,
      //原文输出 不会对HTML内容转义
      //    text:"<strong>重点说三遍</strong>"
      //  })

      //  );

      // 优先使用标准语法 标准语法解决不了的使用原始语法

      // 2.条件
      //content.innerHTML = template("tpl-2",{
      //    //sex:"male"
      //    //sex:"female"
      //    sex:"other"
      //})

      //3.循环
      const students = [
        {
          name: "云牧",
          age: 18,
          sex: "male",
        },
        {
          name: "夕颜",
          age: 16,
          sex: "female",
        },
        {
          name: "林黛玉",
          age: 20,
          sex: "female",
        },
      ];

      //const list = document.getElementById("list");

      //list.innerHTML = template("tpl-3",{
      //    //students:students
      //    students
      //})

      //4.子模板
      const other = document.getElementById("other-content");

      //即使没有参数  也要传递空对象
      content.innerHTML = template("tpl-5-index", {});

      //如果需要像子模板传参  请使用原始语法

      other.innerHTML = template("tpl-5-list", {});
    </script>
  </body>
</html>
